import React, { Component, PureComponent } from 'react';

import './index.less';

import {
    base
} from 'nc-lightapp-front';

// 功能函数
import onEditTableBefore from './functions/onEditTableBefore';
import clickHandle from './functions/clickHandle';
import goBack from './functions/goBack';
import getAllTableData from './functions/getAllTableData';
import checkNewPersonStep from './functions/checkNewPersonStep';
import saveNewPersonStep2 from './functions/saveNewPersonStep2';
import onFormEditBefore from './functions/onFormEditBefore';
import onEditForm from './functions/onEditForm';
import init from './functions/init';
import renderTableHead from './functions/renderTableHead';
import onEditTableAfter from './functions/onEditTableAfter';
import getSubTableData from './functions/getSubTableData';
import stagingSave from './functions/stagingSave';

import FormTitle from './components/FormTitle';

import BackBtn from '../../../../../hrpub/common/components/hr-back';

const {NCAnchor, NCScrollLink, NCScrollElement, NCAffix} = base;

import language from '../../language';

const formLists = ['bd_psndoc', 'hi_psnjob_h', 'hi_psnorg_h'];

class AddNewPage extends PureComponent {
    constructor(props) {
        super(props);
    
        this.state = {
            confirmMsg: ''
        };

        this.goBack = this.goBack.bind(this);
        this.clickHandle = this.clickHandle.bind(this);
        this.checkNewPersonStep = this.checkNewPersonStep.bind(this);
        this.saveNewPersonStep2 = this.saveNewPersonStep2.bind(this);
        this.onEditForm = this.onEditForm.bind(this);
        this.onFormEditBefore = this.onFormEditBefore.bind(this);
        this.renderTableHead = this.renderTableHead.bind(this);
        this.getAllTableData = this.getAllTableData.bind(this);
        this.onEditTableBefore = this.onEditTableBefore.bind(this);
        this.onEditTableAfter = this.onEditTableAfter.bind(this);
        this.changeToEditStatus = this.changeToEditStatus.bind(this);
        this.toggleCardTable = this.toggleCardTable.bind(this);
        this.handleScrollClick = this.handleScrollClick.bind(this);
        this.stagingSave = this.stagingSave.bind(this);
    }

    // 展开/收起子表
    toggleCardTable(props, tableId, value) {
        if(value) {
            getSubTableData.call(this, tableId, 1);
        }
    }

    // 表格编辑前事件
    async onEditTableBefore(...others) {
        return await onEditTableBefore.call(this, ...others, '1');
    }

    // 表格编辑后时间
    onEditTableAfter(...others) {
        console.log(others);
        return onEditTableAfter.call(this, ...others, '1');
    }

    goBack() {
        // 返回主表格的时候，清空复制的内容
        this.props.updateState({
            copyData: {}
        });
        // 返回首页
        return goBack.call(this);
    }

    // 处理头部按钮事件
    clickHandle(props, btnCode) {
        return clickHandle.call(this, props, btnCode);
    }
    
    // 获取全部表格的数据
    getAllTableData() {
        return getAllTableData.call(this);
    }
    
    // 暂存
    stagingSave() {
        stagingSave.call(this, 1, 600704)
    }
    // 新增第一步，检测参数
    checkNewPersonStep() {
        checkNewPersonStep.call(this, 1, 600704);
    }

    saveNewPersonStep2(postData) {
    
        return saveNewPersonStep2.call(this, postData);
    }

    async onFormEditBefore(props, moduleId, fieldName, value, item, e) {
        return await onFormEditBefore.call(this, props, moduleId, fieldName, value, item, e);
    }

    onEditForm(props, moduleId, key, value, oldValue) {
        onEditForm.call(this, props, moduleId, key, value, oldValue, '1')
    }

    componentDidMount() {
        init.call(this);
    
        // 为了解决input失焦和点击事件同时触发，点击事件不生效的问题
        // 解决方案是，当鼠标移动的时候，将所有的input框失焦
        if(this.addPage.querySelector('.header')) {
            this.addPage.querySelector('.header').addEventListener('mouseover', () => {
                let inputs = this.addPage.getElementsByTagName('input');
                Array.prototype.map.call(inputs, function(item) {
                    item.blur();
                })
            });
        }
    }

    renderTableHead(moduleId) {
        return renderTableHead.call(this, moduleId);
    }

    // 重新进入修改状态
    changeToEditStatus(pk_psnjob) {
        const {
            form,
            addPageTemplate,
            cardTable,
            mainPageButtonClick
        } = this.props;

        if(mainPageButtonClick === 'add') {
            formLists.map((item) => {
                form.setFormStatus(item, 'edit')
            });
    
            addPageTemplate.areaCodeList.map((item) => {
                if(!formLists.includes(item)) {
                    cardTable.setStatus(item, 'edit');
                }
            });
            this.props.setButtonStatus2('addEditPage');
            this.props.updateState({
                pageFrom: 'modify',
                subTableEditable: true,
                disableUpload: false,
                contartNewCodeList: []
            });
        }
        else {
            this.props.updateState({
                subTableEditable: true,
                pageFrom: 'modify',
                disableUpload: false,
                contartNewCodeList: []
            }, () => {
                this.props.toEditPage('modify', () => {
                    init.call(this);
                    formLists.map((item) => {
                        form.setFormStatus(item, 'edit')
                    });
            
                    addPageTemplate.areaCodeList.map((item) => {
                        if(!formLists.includes(item)) {
                            cardTable.setStatus(item, 'edit');
                        }
                    });
                }, pk_psnjob);
            });
        }
    }

    handleScrollClick(code) {
        return () => {
            this.props.cardTable.toggleCardTable(code, true);
        }
    }

    render() {
        const {
            button,
            form,
            cardTable,
            addPageTemplate,
            meta,
            getRef,
            disableUpload
        } = this.props;

        // 这里让upload的disabelupload属性跟着变化
        // 所有当改变container里的disableupload 就可以改变upload组件的上传禁用了
        if(getRef('upload')) {
            getRef('upload').setState({
                disableUpload: disableUpload
            });
        }
        return (
            <div
                id="addNewPage"
                className="nc-bill-card add-new-page"
                ref={ref => this.addPage = ref}
            >
                <NCAffix
                    container={document.getElementById('addNewPage')}
                >
                    <div className="header">
                        <div
                            onClick={this.goBack}
                            style={{
                                cursor: 'pointer'
                            }}
                        >
                            <BackBtn
                                title={language['hi6007-000012']/* 国际化处理： 返回*/}
                            />
                        </div>
                        
                        <div className="btn-group">
                            {button.createButtonApp({
                                area: 'head',
                                onButtonClick: this.clickHandle
                            })}
                        </div>
                    </div>
                </NCAffix>
                <div className="add-new-page-content">
                    <NCAnchor>
                        {
                            addPageTemplate.areaCodeList.map((code) => {
                                return (
                                    <NCScrollLink
                                        to={code} 
                                        spy={true} 
                                        key={code}
                                        smooth={true} 
                                        duration={300}
                                        offset={0}
                                    >
                                        <span>
                                            <span
                                                onClick={this.handleScrollClick(code)}
                                            >
                                                {addPageTemplate.allArea[code].name}
                                            </span>
                                        </span>
                                    </NCScrollLink>
                                );
                            })
                        }
                    </NCAnchor>
                    {formLists.map((item, index) => {
                        return (
                            <NCScrollElement
                                name={item}
                                key={item}
                            >
                                <div
                                    className="add-new-page-form-wrapper"
                                    key={index}
                                >
                                    <FormTitle
                                        meta={meta}
                                        type={item}
                                    />
                                    {form.createForm(item, {
                                        onBeforeEvent: this.onFormEditBefore,
                                        onAfterEvent: this.onEditForm,
                                        isNoStandard: true
                                    })}
                                </div>
                            </NCScrollElement>
                        );
                    })}
                
                    {addPageTemplate.areaCodeList.map((item) => {
                        if(addPageTemplate.busiSet.includes(item)) {
                            return (
                                <NCScrollElement
                                    name={item}
                                    key={item}
                                >
                                    <div className="business-sub-table">
                                        {cardTable.createCardTable(item, {
                                            tableHead: this.renderTableHead(item),
                                            showIndex: true,
                                            showCheck: true,
                                            onBeforeEvent: this.onEditTableBefore,
                                            onAfterEvent: this.onEditTableAfter,
                                            onHeadAngleToggle: this.toggleCardTable
                                        })}
                                    </div>
                                </NCScrollElement>
                            )
                        }
                        else if(!formLists.includes(item)) {
                            return (
                                <NCScrollElement
                                    name={item}
                                    key={item}
                                >
                                    {cardTable.createCardTable(item, {
                                        tableHead: this.renderTableHead(item),
                                        showIndex: true,
                                        showCheck: true,
                                        onBeforeEvent: this.onEditTableBefore,
                                        onAfterEvent: this.onEditTableAfter,
                                        onHeadAngleToggle: this.toggleCardTable,
                                        // adaptionHeight: true
                                    })}
                                </NCScrollElement>
                            )
                        }
                    })}
                </div>
            </div>
        );
    }
}

export default AddNewPage;
